<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #app {
      margin: 0 auto;
      width: 80%;
      border: black 1px solid;
      height: 100vh;
    }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    //构造函数 函数名第一个字母大写
    function Person(username,gender,age,id){
        //对象的属性赋值
        this.username=username   
        this.gender=gender
        this.age=age
        this.id=id
        //返回对象的json字符串
        this.toString=function(){
            return `{"username":${this.username},"gender":"${this.gender}","age":"${this.age}","id":"${this.id}"}`
        }
        //返回用户的用户名函数
        this.getUsername=function(){
            return this.username
        }
    }
     //创建一个新的对象
    let p=new Person("tom","男",20,1)
    console.log(p);
    p.age=22
    let info=p.toString()
    console.log(info);
    
    //括号里为实参
    let p1=new Person("wenddy", '女', 20, 2)
    console.log(p1);


  //this对象:
  //1、任何时候this都是js的原生对象
  //2、默认(全局作用域)情况下this=window对象
  //3、在构造函数中this指的是：当前调用者对象
  app.onclick = function() {
    console.log(this) //app
  }
</script>
</html>